<div id="content_header">
  <h3>Register a new province</h3>
</div>

<div class="row">
  <div class="col-md-6 col-lg-4">
    <form name="provinceForm" role="form" ng-submit="addProvince()">

      <div class="form-group">
        <label for="Name">
          Province Name
        </label>
        <span class="error" ng-show="provinceForm.Name.$error.required">Required!</span>
        <input type="text" name="Name" class="form-control" id="" placeholder="Input field" ng-model="provinceNew.Name" required>
      </div>

      <div class="form-group">
        <label for="Country">
          Country
        </label>
        <select name="" class="form-control" id="Country" ng-model="provinceNew.Country.Id" ng-options="country.Id as country.Name for country in countries" required>
          <option value="" ng-hide="provinceNew.Country.Id">Select a Country.</option>
        </select>
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
    </form>
  </div>
</div>